<template>
	<!-- 邀请记录 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m102}}
				</view>
				<!-- <view @click="$tool.navTo('/pages/invitationRewards/invitationRecord2')"
					class="flex-1 text-alignR A-Medium record" :class="model=='light'?'recordLight':''">
					<view class="pr-3">
						推广奖励
					</view>
				</view> -->
				<view class="flex-1 f0 pr-3 flex justify-end">
					<image @click="$tool.navTo('/pages/invitationRewards/invitationRecord2')" style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h24">

		</view>
		<view class="flex align-center justify-center mb-3">
			<view class="f0">
				<image style="width: 156rpx;" src="/static/images/member/2.png" mode="widthFix"></image>
			</view>
			<view class="topTitle A-Medium" :class="model=='light'?'topTitleLight':''">
				{{i18n.m103}}
			</view>
			<view class="f0">
				<image style="width: 156rpx;" src="/static/images/member/3.png" mode="widthFix"></image>
			</view>
		</view>
		<view v-if="lists" class="mx-3 flex align-center Wrap text-alignC py-3" :class="model=='light'?'WrapLight':''">
			<view class="flex-1 flex flex-column align-center">
				<view class="top1 D-Bold">
					{{lists.allList.length||0}}
				</view>
				<view class="bottom A-Medium" style="margin-top: 8rpx;">
					{{i18n.m104}}
				</view>
			</view>
			<view class="flex-1 flex flex-column align-center">
				<view class="top2 D-Bold">
					{{inviteCount1}}
				</view>
				<view class="bottom A-Medium" style="margin-top: 8rpx;">
					{{i18n.m105}}(USDT)
				</view>
			</view>
			<view class="flex-1 flex flex-column align-center">
				<view class="top1 D-Bold">
					{{inviteCount2}}
				</view>
				<view class="bottom A-Medium" style="margin-top: 8rpx;">
					{{i18n.m106}}(USDT)
				</view>
			</view>
		</view>
		<view class="tabbar A-Medium flex align-center mx-3" :class="model=='light'?'tabbarLight':''">
			<view class="mr-3" @click="changeCurrent(0)" :class="current==0?'item1':'item'">
				{{i18n.m107}}
			</view>
			<view class="mr-3" @click="changeCurrent(1)" :class="current==1?'item1':'item'">
				{{i18n.m108}}
			</view>
			<view class="mr-3" @click="changeCurrent(2)" :class="current==2?'item1':'item'">
				{{i18n.m109}}
			</view>
			<view class="mr-3" @click="changeCurrent(3)" :class="current==3?'item1':'item'">
				{{i18n.m110}}
			</view>
		</view>
		<view class="mx-3 A-Medium Wrap py-3 pl-3" :class="model=='light'?'WrapLight':''">
			<view class="flex bottom align-center" style="margin-bottom: 16rpx;">
				<!-- 154rpx -->
				<view style="width: 220rpx;">
					{{i18n.m111}}
				</view>
				<!-- <view style="width: 200rpx;">
					{{i18n.m112}}
				</view> -->
				<!-- 180rpx -->
				<view style="width: 246rpx;">
					{{i18n.m113}}
				</view>
				<!-- 126rpx -->
				<view style="width: 192rpx;">
					{{i18n.m114}}
				</view>
			</view>
			<view v-for="(item,index) in list" class="flex bottom align-center"  :style="index!=(list.length-1)?'margin-bottom: 16rpx;':''">
				<view style="width: 220rpx;">
					{{item.nickname}}
				</view>
				<!-- <view style="width: 200rpx;">
					{{item.mobileNumber}}
				</view> -->
				<view style="width: 246rpx;">
					{{item.createTime.split(' ')[0]}}
				</view>
				<!--  {{}} -->
				<view :class="(item.passportAuthStatus||item.cardAuthStatus)?'bottom2':'bottom'" style="width: 192rpx;">
					{{(item.passportAuthStatus||item.cardAuthStatus)?i18n.m002:i18n.m003}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		inviteList,
		totalInviteReward
	} from '@/core/api/user.js';
	export default {
		data() {
			return {
				lists:'',
				current:0,
				list:[],
				inviteCount1:0,
				inviteCount2:0,
			}
		},
		onLoad() {
			totalInviteReward({
				mobileUserId:uni.getStorageSync('mobileUserId'),
			}).then(res=>{
				console.log(res,'--------')
				
				this.inviteCount1 = res.result.intradayInviteReward?res.result.intradayInviteReward:0;
				this.inviteCount2 = res.result.totalInviteReward?res.result.totalInviteReward:0;
			})
			this.getInviteList();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			getInviteList(){
				inviteList({
					mobileUserId:uni.getStorageSync('mobileUserId'),
				}).then(res=>{
					console.log(res,'cs');
					this.lists = res.result;
					this.list = this.lists.allList;
				})
			},
			changeCurrent(e){
				this.current = e;
				if(e==0){
					this.list = this.lists.allList;
				}else{
					this.list = this.lists['level'+e+'List'];
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}
	
	.recordLight {
		color: #0E0F11;
	}
	.h24 {
		height: 24rpx;
	}

	.topTitle {
		font-size: 32rpx;
		color: #F7F7F7;
		margin: 0 24rpx;
	}
	.topTitleLight {
		color: #0E0F11;
	}
	

	.Wrap {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;

		view {
			flex-shrink: 0;
		}

		.top1 {
			font-weight: bold;
			font-size: 36rpx;
			color: #F7F7F7;
		}

		.top2 {
			font-weight: bold;
			font-size: 36rpx;
			color: #D22540;
		}

		.bottom {
			font-size: 24rpx;
			color: #7F838D;
		}
		.bottom2 {
			font-size: 24rpx;
			color: #82DA4C;
		}
	}
	.WrapLight {
		background: #fff;
		border: none;
	
		.top1 {
			color: #0E0F11;
		}
	
		.bottom {
			font-size: 24rpx;
			color: #7F838D;
		}
		.bottom2 {
			font-size: 24rpx;
			color: #82DA4C;
		}
	}
	.tabbar {
		margin-top: 48rpx;
		margin-bottom: 24rpx;
		overflow-y: scroll;

		view {
			flex-shrink: 0;
		}

		.item {
			font-size: 24rpx;
			color: #7F838D;
		}

		.item1 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}
	.tabbarLight {
		.item1 {
			color: #0E0F11;
		}
	}
</style>